{# Toast / snackbar driven by sessionStorage. Survives page reloads: the
   trigger writes a message to storage just before reloading, and the
   snackbar reads it on mount and clears the key.

   Trigger contract (from any Alpine component, or plain JS):

       window.appFlashSnackbar('Project saved');
       window.location.reload();

   The snackbar reads once, clears, shows. Auto-fades after TTL_MS (4s).
   Manual X dismisses immediately.

   Bottom-right placement so it never collides with page content; mobile
   drops to bottom-full-width via responsive padding. Included by
   base.html, so every page extending it gets the toast surface. #}
<div x-data="snackbar()"
     x-init="init()"
     x-show="visible" x-cloak
     x-transition:enter="transition-all duration-200"
     x-transition:enter-start="opacity-0 translate-y-2"
     x-transition:enter-end="opacity-100 translate-y-0"
     x-transition:leave="transition-opacity duration-300"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="fixed bottom-4 right-4 left-4 sm:left-auto z-50 max-w-sm
            bg-aegis-card border border-aegis-border rounded-lg shadow-2xl
            px-4 py-3 flex items-center gap-3">
  <p class="flex-1 text-sm text-white" x-text="text"></p>
  <button @click="dismiss()"
          aria-label="Dismiss"
          class="shrink-0 text-aegis-muted/70 hover:text-white transition-colors">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M6 18L18 6M6 6l12 12"/>
    </svg>
  </button>
</div>

<script>
function snackbar() {
  const STORAGE_KEY = '__app_snackbar';
  const TTL_MS = 4000;
  return {
    visible: false,
    text: '',
    _timer: null,

    init() {
      let raw = null;
      try { raw = sessionStorage.getItem(STORAGE_KEY); } catch (_) { return; }
      if (!raw) return;
      try { sessionStorage.removeItem(STORAGE_KEY); } catch (_) {}
      let payload;
      try { payload = JSON.parse(raw); } catch (_) { return; }
      if (!payload || !payload.text) return;
      this.text = payload.text;
      this.visible = true;
      this._timer = setTimeout(() => this.dismiss(), TTL_MS);
    },
    dismiss() {
      this.visible = false;
      if (this._timer) {
        clearTimeout(this._timer);
        this._timer = null;
      }
    },
  };
}

// Public helper — call this from any component that wants a snackbar to
// appear after a page reload. Keeps the storage key and JSON shape
// centralised so triggers don't drift.
window.appFlashSnackbar = function(text) {
  try {
    sessionStorage.setItem('__app_snackbar', JSON.stringify({ text: text }));
  } catch (_) { /* private mode / disabled — silently no-op */ }
};
</script>